<template>
	<div class="layout-padding fillings-container">
		<HyTable
			:tableConfig="tableConfig"
			:tableColumns="tableColumns"
			:searchConfig="searchConfig"
			:searchFields="searchFields"
			:searchDefault="searchDefault"
			:buttonConfig="buttonConfig"
			ref="hyTableRef"
		>
			<!-- <template #deptNameSlot="{ row, column }">
				{{ row.paramMap?.responsibleDeptName || row.paramMap?.responsibleDept }}
			</template> -->
			<template #operation>
				<el-table-column fixed="right" label="操作" width="80">
					<template #default="{ row }">
						<el-button text type="primary" icon="Document" @click="handleDeal(row)">处理</el-button>
					</template>
				</el-table-column>
			</template>
		</HyTable>
	</div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import HyTable from '/@/components/HyTable/components/TableLayout/default.vue';
import { queryTaskPage, querygroupName } from '/@/api/stagings';
import { useJump } from '../useRouterJump';

export default defineComponent({
	name: 'matters',
	components: { HyTable },
	setup() {
		const router = useRouter();
		const tableColumns = computed(() => {
			return [
				{ prop: 'processName', label: '类别' },
				{ prop: 'taskName', label: '审批节点' },
				{ prop: 'paramMap.appName', label: '名称' },
				{ prop: 'paramMap.responsibleDeptName', label: '责任部门' },
				{ prop: 'paramMap.reportTime', label: '申报时间' },
			];
		});
		const tableConfig = computed(() => {
			return {
				request: queryTaskPage,
				showSearch: true,
				isCostomTop: false,
				title: '我的待办事项',
				defaultData: [],
			};
		});
		const searchConfig = ref({
			labelWidth: '120px',
			span: 6,
			offset: 0,
			type: 'search',
			title: '我的待办事项',
			show: true,
		});
		// 配置搜索
		const optionsData = ref([]);
		const searchFields = computed(() => {
			return {
				appName: {
					type: 'input',
					label: '关键字',
					span: 8,
					placeholder: '请输入关键字进行模糊搜索',
				},
				flowCode: {
					type: 'select',
					label: '类别',
					span: 8,
					placeholder: '请选择类别',
					options: optionsData.value,
				},
				taskTime: {
					type: 'date',
					picker: 'datetimerange',
					label: '申报时间',
					span: 8,
				},
			};
		});
		const buttonConfig = computed(() => {
			return {
				span: 24,
				offset: 18,
			};
		});
		const searchDefault = ref({
			queryType: 1,
			groupName: 'irs-pmgt',
		});
		const { toAreaDigital, toThreeList, toNumDetail, toAppDetail, toInfoDetail, toExpertDetail } = useJump(router);
		function handleDeal(row) {
			console.log(row);
			const routeUrl = row.routeConfig?.routeUrl; //跳转路由
			const id = row.paramMap?.declareId; //业务详情id
			if (routeUrl) {
				if (routeUrl.indexOf('areaDigitalApp') > -1) {
					//区县
					toAreaDigital(row);
				} else if (routeUrl.indexOf('threeList') > -1) {
					//三张清单
					toThreeList(row, null);
				} else if (routeUrl.indexOf('operate') > -1) {
					//专家库
					toExpertDetail(row, null);
				} else if (routeUrl.indexOf('digitalList') > -1) {
					//数字化应用申报
					toNumDetail(row, 1);
				} else if (routeUrl.indexOf('digitalImplement') > -1) {
					//数字化实施
					toAppDetail(row, 1);
				} else if (routeUrl.indexOf('fileEdit') > -1) {
					//资料修改流程
					toInfoDetail(row, null);
				} else {
					ElMessage.error('路由配置错误');
				}
			} else {
				ElMessage.error('暂无详情');
			}
		}
		onMounted(() => {
			querygroupName({ groupName: 'irs-pmgt' }).then((res) => {
				if (res.ok) {
					res.data &&
						res.data.forEach((item) => {
							item['label'] = item.name;
							item['value'] = item.flowCode;
						});
					optionsData.value = res.data;
				}
			});
		});
		return {
			tableColumns,
			tableConfig,
			searchFields,
			searchConfig,
			searchDefault,
			buttonConfig,
			handleDeal,
		};
	},
});
</script>

<style scoped lang="scss">
.fillings-container {
	height: auto;
}
</style>
